<template>
	<view class="mine-container">
		<!-- 顶部用户信息栏 -->
		<view class="top-bar">
			<!-- 点击头像和昵称区域进入个人信息页 -->
			<view class="user-info" @click="goProfile">
				<image :src="user.avatarUrl ? (http.baseUrl + user.avatarUrl) : '/static/mine/avatar.png'" class="avatar" mode="aspectFill" />
				<view class="user-text">
					<view class="user-name">{{ user.nickName }}</view>
					<text class="user-email">{{ user.email }}</text>
				</view>
			</view>
			<image src="/static/mine/qrcode-icon.png" class="qrcode-icon" mode="aspectFit" />
		</view>
		
		<!-- 公司信息区域（单独区域，不包含在用户信息点击区域内） -->
		<view class="company-section">
			<!-- 已绑定公司时显示公司信息 -->
			<view v-if="company" class="company-info-container">
				<view class="company-info">
					<text class="company-text">{{ company.companyName }}</text>
					<view class="company-code-section" @click="copyToClipboard(company.companyCode, '公司编码已复制')">
						<text class="company-code">编码: {{ company.companyCode }}</text>
						<text class="copy-icon">📋</text>
					</view>
				</view>
			</view> 
			<!-- 未绑定公司时显示创建/绑定按钮 -->
			<view v-else-if="!loadingCompany" class="company-actions">
				<view class="company-action" @click="handleOption('createCompany')">
					<text class="action-icon">🏢</text>
					<text class="action-text">创建公司</text>
				</view>
				<view class="company-action" @click="handleOption('bindCompany')">
					<text class="action-icon">🔗</text>
					<text class="action-text">绑定公司</text>
				</view>
			</view>
		</view>

		<!-- 功能图标栏 -->
		<view class="func-icons">
			<view class="icon-item" @click="handleOption('group')">
				<image src="/static/mine/group-manage-icon.png" class="func-icon" mode="aspectFit" />
				<text class="icon-text">团队管理</text>
			</view>
<!-- 			<view class="icon-item" @click="handleOption('tourist')">
				<image src="/static/mine/tourist-list-icon.png" class="func-icon" mode="aspectFit" />
				<text class="icon-text">游客列表</text>
			</view> -->
			<view class="icon-item" @click="handleOption('car')">
				<image src="/static/mine/car-allocate-icon.png" class="func-icon" mode="aspectFit" />
				<text class="icon-text">车辆管理</text>
			</view>
						<view class="icon-item" @click="handleOption('leader')">
				<image src="/static/mine/tourleader.png" class="func-icon" mode="aspectFit" />
				<text class="icon-text">领队管理</text>
			</view>
			<view class="icon-item" @click="handleOption('itinerary')">
				<image src="/static/mine/Itinerarymanagement.png" class="func-icon" mode="aspectFit" />
				<text class="icon-text">行程管理</text>
			</view>

		</view>
		<!-- 列表选项区 -->
		<view class="options-list">
			<view class="option-item" @click="handleOption('message')">
				<image src="/static/mine/bell-icon.png" class="option-icon" mode="aspectFit" />
				<text class="option-text">消息通知</text>
 			</view>
			<view class="option-item" @click="handleOption('help')">
				<image src="/static/mine/help-icon.png" class="option-icon" mode="aspectFit" />
				<text class="option-text">帮助中心</text>
				 
			</view>
			<view class="option-item" @click="handleOption('promise')">
				<image src="/static/mine/LetterCommitment.png" class="option-icon" mode="aspectFit" />
				<text class="option-text">用户承诺书</text>
 			</view>
			<view class="option-item" @click="handleOption('share')">
				<image src="/static/mine/share-icon.png" class="option-icon" mode="aspectFit" />
				<text class="option-text">分享小程序</text>
 			</view>
		</view>
	</view>
</template>

<script>
import { getUser, logout } from '@/https/auth.js'
import { updateUser } from '@/https/user.js'
import { getCurrentCompany } from '@/https/company.js'
import http from '@/https/http.js'

export default {
	data() {
		return {
			// 用户信息
			user: {
				nickName: '未登录',
				avatarUrl: '',
				email: ''
			},
			// 公司信息
			company: null,
			loadingCompany: false
		}
	},

	// 页面加载时执行
	onLoad() {
		this.initUserInfo()
		this.fetchCompanyInfo()
	},

	// 页面显示时执行（每次打开页面都会执行）
	onShow() {
		this.refreshUserInfo()
		this.fetchCompanyInfo()
	},

	// 页面卸载时执行
	onUnload() {
		// 移除事件监听
		try {
			if (typeof uni !== 'undefined' && uni.$off) {
				uni.$off('user:updated')
				uni.$off('company:updated')
			}
		} catch (e) {
			// 忽略错误
		}
	},

	// 页面初始化时执行
	created() {
		// 监听用户信息更新事件
		try {
			if (typeof uni !== 'undefined' && uni.$on) {
				uni.$on('user:updated', (newUser) => {
					try {
						if (newUser && newUser.nickName) this.user.nickName = newUser.nickName
						if (newUser && newUser.avatarUrl) this.user.avatarUrl = newUser.avatarUrl
						if (newUser && newUser.email) this.user.email = newUser.email
					} catch (e) {
						// 忽略错误
					}
				})
				
				// 监听公司更新事件
				uni.$on('company:updated', () => {
					this.fetchCompanyInfo()
				})
			}
		} catch (e) {
			// 忽略错误
		}
	},

	computed: {
		// 提供 http 对象给模板使用
		http() {
			return http
		}
	},

	methods: {
		// 初始化用户信息
		initUserInfo() {
			try {
				const u = getUser()
				if (u) {
					this.user.nickName = u.nickName || u.name || u.nick || this.user.nickName
					this.user.avatarUrl = u.avatarUrl || u.avatar || ''
					this.user.email = u.email || ''
				}
			} catch (e) {
				// 忽略错误
			}
		},

		// 刷新用户信息
		refreshUserInfo() {
			try {
				const u = getUser()
				if (u) {
					this.user.nickName = u.nickName || u.name || this.user.nickName
					this.user.avatarUrl = u.avatarUrl || u.avatar || this.user.avatarUrl
					this.user.email = u.email || this.user.email
				}
			} catch (e) {
				// 忽略错误
			}
		},

		// 获取公司信息
		fetchCompanyInfo() {
			this.loadingCompany = true
			getCurrentCompany().then(res => {
				if (res && res.companyId > 0) {
					this.company = res
				} else {
					this.company = null
				}
			}).catch(e => {
				console.error('获取公司信息失败:', e)
				this.company = null
			}).finally(() => {
				this.loadingCompany = false
			})
		},

		// 复制文本到剪贴板
		copyToClipboard(text, successText = '复制成功') {
			if (typeof uni !== 'undefined' && uni.setClipboardData) {
				uni.setClipboardData({
					data: text,
					success: () => {
						uni.showToast({
							title: successText,
							icon: 'success'
						})
					}
				})
			}
		},

		// 处理选项点击
		handleOption(type) {
			console.log('点击选项：', type)
			// 跳转到相应页面
			if (type === 'group') {
				uni.navigateTo({ url: '/pages/groups/groupslist' })
			} else if (type === 'tourist') {
				console.log('跳转到游客列表')
			} else if (type === 'car') {
				uni.navigateTo({ url: '/pages/cars/carlist' })
			} else if (type === 'report') {
				console.log('跳转到报表统计')
			} else if (type === 'leader') {
				uni.navigateTo({ url: '/pages/mine/leaderlist' })
			} else if (type === 'itinerary') {
				uni.navigateTo({ url: '/pages/mine/itinerarylist' })
			} else if (type === 'message') {
				uni.navigateTo({ url: '/pages/message/message' })
			} else if (type === 'help') {
				console.log('跳转到帮助中心')
			} else if (type === 'share') {
				this.handleShare()
			} else if (type === 'createCompany') {
				uni.navigateTo({ url: '/pages/mine/companycreate' })
			} else if (type === 'bindCompany') {
				uni.navigateTo({ url: '/pages/mine/companybind' })
			} else if (type === 'promise') {
				uni.navigateTo({ url: '/pages/mine/promise' })
			}
		},

		// 处理分享
		handleShare() {
			// 显示分享面板
			if (typeof uni !== 'undefined') {
				// 设置显示分享菜单
				uni.showShareMenu({
					withShareTicket: true,
					menus: ['shareAppMessage', 'shareTimeline']
				});
				
				// 在微信小程序环境中，可以尝试直接调用分享
				try {
					if (typeof wx !== 'undefined' && wx.showShareMenu) {
						// 微信小程序特定的分享设置
						wx.showShareMenu({
							withShareTicket: true,
							menus: ['shareAppMessage', 'shareTimeline']
						});
					}
				} catch (e) {
					// 忽略错误
				}
				
				// 提示用户使用右上角的分享功能
				uni.showModal({
					title: '分享小程序',
					content: '请点击页面右上角的「...」选择分享方式',
					showCancel: false,
					confirmText: '我知道了'
				});
			}
			console.log('分享小程序')
		},

		// 跳转到个人信息页
		goProfile() {
			uni.navigateTo({ url: '/pages/mine/profile' })
		},

		// 处理退出登录
		handleLogout() {
			console.log('触发退出登录')
			// 清除 auth 中的用户信息
			try {
				logout()
			} catch (e) {
				// 忽略错误
			}
			this.user = { nickName: '未登录', avatarUrl: '', email: '' }
			uni.showToast({ title: '已退出登录', icon: 'none' })
		}
	},

	// 分享给朋友
	onShareAppMessage() {
		return {
			title: '计小旅',
			path: '/pages/index/index',
			desc: '专为旅游计调打造的轻量化工作工具，聚焦行程规划、资源统筹、信息整理核心需求，告别低效手动操作，顺畅推进计调全流程。',
		}
	},

	// 分享到朋友圈
	onShareTimeline() {
		return {
			title: '计小旅',
			query: 'from=timeline',
			content: '专为旅游计调打造的轻量化工作工具，聚焦行程规划、资源统筹、信息整理核心需求，告别低效手动操作，顺畅推进计调全流程。'
		}
	}
}
</script>
<style scoped>
	.mine-container {
		padding: 0;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	/* 顶部用户信息栏 */
	.top-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #007aff;
		color: #fff;
		padding: 80rpx;
		border-bottom-left-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
	}

	.user-info {
		display: flex;
		align-items: center;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.user-text {
		display: flex;
		flex-direction: column;
	}

	.user-name {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 8rpx;
	}

	.user-email {
		font-size: 28rpx;
		opacity: 0.9;
		margin-bottom: 8rpx;
	}
	
	/* 公司信息区域 */
	.company-section {
		margin: -20rpx 30rpx 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}
	
	/* 已绑定公司时的显示 */
	.company-info-container {
		padding: 10rpx 0;
	}
	
	.company-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}
	
	.company-text {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		flex: 1;
	}
	
	.company-code-section {
		display: flex;
		align-items: center;
		gap: 5rpx;
		background-color: #f5f5f5;
		padding: 6rpx 15rpx;
		border-radius: 15rpx;
		cursor: pointer;
	}
	
	.company-code-section:active {
		background-color: #e8e8e8;
	}
	
	.company-code {
		font-size: 24rpx;
		color: #666;
	}
	
	.copy-icon {
		font-size: 20rpx;
	}
	
	/* 未绑定公司时的操作按钮 */
	.company-actions {
		display: flex;
		gap: 20rpx;
		padding: 10rpx 0;
	}
	
	.company-action {
		display: flex;
		align-items: center;
		gap: 8rpx;
		background-color: #f5f5f5;
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
		cursor: pointer;
	}
	
	.company-action:active {
		background-color: #e8e8e8;
	}
	
	.action-icon {
		font-size: 28rpx;
	}
	
	.action-text {
		font-size: 26rpx;
		color: #333;
	}

	.qrcode-icon {
		width: 60rpx;
		height: 60rpx;
	}

	/* 功能图标栏 */
	.func-icons {
		display: flex;
		justify-content: space-around;
		padding: 30rpx;
		background-color: #fff;
		margin: -20rpx 30rpx 30rpx;
		/* 向上覆盖顶部圆角 */
		border-radius: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.icon-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.func-icon {
		width: 60rpx;
		height: 60rpx;
		margin-bottom: 10rpx;
	}

	.icon-text {
		font-size: 26rpx;
		color: #333;
	}

	/* 列表选项区 */
	.options-list {
		margin: 0 30rpx;
	}

	.option-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		background-color: #fff;
		margin-bottom: 10rpx;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
	}

	.option-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	.option-text {
		flex: 1;
		font-size: 30rpx;
		color: #333;
	}

	.arrow-icon {
		width: 30rpx;
		height: 30rpx;
		opacity: 0.7;
	}


	
	/* 退出登录按钮 */
	.logout-btn {
		margin: 40rpx 30rpx;
		padding: 26rpx;
		border: 2rpx solid #007aff;
		color: #007aff;
		background-color: #fff;
		font-size: 32rpx;
		border-radius: 12rpx;
	}
</style>